import { useState } from 'react';
import AdminLayout from '../../components/admin/AdminLayout';
import DataTable from '../../components/admin/tables/DataTable';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faSearch, faPlus, faFilter, 
  faCheck, faTimes, faUser, faEnvelope, faCalendar 
} from '@fortawesome/free-solid-svg-icons';

export default function UsersManagement() {
  const [searchTerm, setSearchTerm] = useState('');
  const [activeFilter, setActiveFilter] = useState('all');
  
  // 模拟用户数据
  const mockUsers = [
    { 
      id: 1, 
      username: '健康达人123', 
      email: 'health123@example.com', 
      fullName: '张健康', 
      registeredDate: '2023-10-15', 
      lastActive: '2023-11-05', 
      status: 'active',
      avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=50&h=50&q=80'
    },
    { 
      id: 2, 
      username: '跑步爱好者', 
      email: 'runner@example.com', 
      fullName: '李跑跑', 
      registeredDate: '2023-09-22', 
      lastActive: '2023-11-04', 
      status: 'active',
      avatar: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=50&h=50&q=80'
    },
    { 
      id: 3, 
      username: '营养师小王', 
      email: 'nutrition@example.com', 
      fullName: '王营养', 
      registeredDate: '2023-08-18', 
      lastActive: '2023-11-01', 
      status: 'active',
      avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=50&h=50&q=80'
    },
    { 
      id: 4, 
      username: '睡眠研究者', 
      email: 'sleep@example.com', 
      fullName: '赵睡睡', 
      registeredDate: '2023-07-05', 
      lastActive: '2023-10-25', 
      status: 'inactive',
      avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=50&h=50&q=80'
    },
    { 
      id: 5, 
      username: '健身教练', 
      email: 'fitness@example.com', 
      fullName: '孙健身', 
      registeredDate: '2023-06-19', 
      lastActive: '2023-11-03', 
      status: 'active',
      avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=50&h=50&q=80'
    },
    { 
      id: 6, 
      username: '瑜伽爱好者', 
      email: 'yoga@example.com', 
      fullName: '周瑜伽', 
      registeredDate: '2023-05-11', 
      lastActive: '2023-10-15', 
      status: 'active',
      avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=50&h=50&q=80'
    },
    { 
      id: 7, 
      username: '减肥达人', 
      email: 'weightloss@example.com', 
      fullName: '吴减减', 
      registeredDate: '2023-04-25', 
      lastActive: '2023-10-30', 
      status: 'active',
      avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=50&h=50&q=80'
    },
    { 
      id: 8, 
      username: '冥想指导', 
      email: 'meditation@example.com', 
      fullName: '郑冥想', 
      registeredDate: '2023-03-15', 
      lastActive: '2023-09-22', 
      status: 'inactive',
      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=50&h=50&q=80'
    },
  ];

  // 用户过滤
  const filteredUsers = mockUsers.filter(user => {
    const matchesSearch = (
      user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.fullName.toLowerCase().includes(searchTerm.toLowerCase())
    );
    
    const matchesFilter = 
      activeFilter === 'all' || 
      (activeFilter === 'active' && user.status === 'active') || 
      (activeFilter === 'inactive' && user.status === 'inactive');
    
    return matchesSearch && matchesFilter;
  });

  // 表格列配置
  const columns = [
    { 
      key: 'avatar', 
      title: '', 
      sortable: false,
      render: (user) => (
        <div className="flex-shrink-0">
          <img 
            className="h-10 w-10 rounded-full" 
            src={user.avatar} 
            alt={user.fullName} 
          />
        </div>
      )
    },
    { 
      key: 'username', 
      title: '用户名', 
      sortable: true,
      render: (user) => (
        <div className="text-sm font-medium text-gray-900">{user.username}</div>
      )
    },
    { 
      key: 'email', 
      title: '邮箱', 
      sortable: true,
      render: (user) => (
        <div className="text-sm text-gray-500">{user.email}</div>
      )
    },
    { 
      key: 'fullName', 
      title: '姓名', 
      sortable: true 
    },
    { 
      key: 'registeredDate', 
      title: '注册日期', 
      sortable: true,
      render: (user) => (
        <div className="text-sm text-gray-500">{user.registeredDate}</div>
      )
    },
    { 
      key: 'lastActive', 
      title: '最近活动', 
      sortable: true,
      render: (user) => (
        <div className="text-sm text-gray-500">{user.lastActive}</div>
      )
    },
    { 
      key: 'status', 
      title: '状态', 
      sortable: true,
      render: (user) => (
        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
          user.status === 'active' 
            ? 'bg-green-100 text-green-800' 
            : 'bg-red-100 text-red-800'
        }`}>
          {user.status === 'active' ? '活跃' : '非活跃'}
        </span>
      )
    },
  ];

  // 处理操作
  const handleView = (user) => {
    console.log('查看用户:', user);
    // 实现查看用户详情的逻辑
  };

  const handleEdit = (user) => {
    console.log('编辑用户:', user);
    // 实现编辑用户的逻辑
  };

  const handleDelete = (user) => {
    console.log('删除用户:', user);
    // 实现删除用户的逻辑
  };

  return (
    <AdminLayout>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900">用户管理</h1>
        <p className="mt-1 text-sm text-gray-600">管理平台的所有用户账户和权限。</p>
      </div>

      {/* 搜索和过滤 */}
      <div className="mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
        <div className="w-full md:w-1/3 relative mb-4 md:mb-0">
          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
            <FontAwesomeIcon icon={faSearch} className="text-gray-400" />
          </div>
          <input
            type="text"
            placeholder="搜索用户..."
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
        
        <div className="flex flex-wrap gap-2">
          <button
            className={`flex items-center px-4 py-2 text-sm font-medium rounded-md ${
              activeFilter === 'all'
                ? 'bg-blue-100 text-blue-700'
                : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
            }`}
            onClick={() => setActiveFilter('all')}
          >
            全部用户
          </button>
          <button
            className={`flex items-center px-4 py-2 text-sm font-medium rounded-md ${
              activeFilter === 'active'
                ? 'bg-green-100 text-green-700'
                : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
            }`}
            onClick={() => setActiveFilter('active')}
          >
            <FontAwesomeIcon icon={faCheck} className="mr-2 text-green-500" />
            活跃用户
          </button>
          <button
            className={`flex items-center px-4 py-2 text-sm font-medium rounded-md ${
              activeFilter === 'inactive'
                ? 'bg-red-100 text-red-700'
                : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
            }`}
            onClick={() => setActiveFilter('inactive')}
          >
            <FontAwesomeIcon icon={faTimes} className="mr-2 text-red-500" />
            非活跃用户
          </button>
          <button
            className="flex items-center px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700"
          >
            <FontAwesomeIcon icon={faPlus} className="mr-2" />
            添加用户
          </button>
        </div>
      </div>

      {/* 用户表格 */}
      <DataTable
        columns={columns}
        data={filteredUsers}
        title="用户列表"
        description={`共 ${filteredUsers.length} 个用户`}
        onView={handleView}
        onEdit={handleEdit}
        onDelete={handleDelete}
        pagination={true}
        pageSize={5}
      />
    </AdminLayout>
  );
} 